<template>
    <div class="flex bg-#11151D w-full h-full">
            <Navigation @pushUrl="pushUrl"></Navigation>
        <div class="flex-1 relative  overflow-hidden bg-gradient-to-b from-[#171E29] to-[#424D5C]">
            <transition name="slide">
                <Map class="relative"
                    :style="{ visibility: pageType == 'map' ? 'visible' : 'hidden', height: pageType == 'map' ? '100%' : '1px' }"></Map>
            </transition>
            <transition name="slide">
                <Music
                    :style="{ visibility: pageType == 'music' ? 'visible' : 'hidden', height: pageType == 'music' ? '100%' : '0.1%' }">
                </Music>
            </transition>
            <transition name="slide">
                <Car
                    :style="{ visibility: pageType == 'car' ? 'visible' : 'hidden', height: pageType == 'car' ? '100%' : '0.1%' }">
                </Car>
            </transition>
            <transition name="slide">
                <Setting
                    :style="{ visibility: pageType == 'setting' ? 'visible' : 'hidden', height: pageType == 'setting' ? '100%' : '0.1%' }">
                </Setting>
            </transition>
            <transition name="slide-home">
                <Home @pushUrl="pushUrl" v-show="pageType == 'home'" class="relative z-1"></Home>
            </transition>
        </div>
        <Bottom class="absolute bottom-1.6rem z-1000" @pushUrl="pushUrl"></Bottom>

    </div>
    <!-- <Debug></Debug> -->
</template>
<script lang="ts" setup>
import { emitter } from '@/utils/mitt';
import Bottom from './common/home/common/bottom/bottom.vue';

import { ref } from 'vue';
import Map from './common/map/map.vue';
import Home from './common/home/home.vue';
import Car from './common/car/car.vue';
import Music from './common/music/music.vue';
import Setting from './common/setting/setting.vue';
import Debug from './common/debug/debug.vue';
import Navigation from './common/navigation/navigation.vue';

const pageType = ref('home');

function pushUrl(url: string) {
    pageType.value = url;
}

emitter.on("pushUrl", (url: string) => {
    pushUrl(url)
})
</script>
<style scoped>
/* 原有滑动动画样式 */
.slide-enter-active,
.slide-leave-active {
    transition: transform 0.3s ease;
}

.slide-enter-from {
    transform: translateX(100%);
}

.slide-leave-to {
    transform: translateX(-100%);
}

/* home 页面专属动画样式，结合滑动和淡入淡出 */
.slide-home-enter-active,
.slide-home-leave-active {
    transition: all 0.5s ease;
    /* 同时过渡 transform 和 opacity */
}

.slide-home-enter-from {
    transform: translateX(100%);
    opacity: 0;
    /* 初始隐藏 */
}

.slide-home-enter-to {
    transform: translateX(0);
    opacity: 1;
    /* 最终显示 */
}

.slide-home-leave-from {
    transform: translateX(0);
    opacity: 1;
    /* 初始显示 */
}

.slide-home-leave-to {
    transform: translateX(100%);
    opacity: 0;
    /* 最终隐藏 */
}
</style>